<template>
    <div class="main">
        <group gutter="0">
            <datetime
                v-model="startTime"
                title="选择开始时间:"
            >
            </datetime>
            <datetime
                v-model="endTime"
                title="选择结束时间:"
            >
            </datetime>
        </group>
        <div class="ovh">
            <button class="btn fl" @click="search(true)">搜索</button>
            <button style="background: #ddd" class="btn fl" @click="search(false)">取消</button>
        </div>
        <cell title="共提现：" :value="totalMoney"></cell>
        <template v-for="item in myData">
            <card :header="{title:item.time}">
                <div slot="content" class="card-demo-flex card-demo-content01">
                    <div class="vux-1px-r">
                        <span>{{item.id}}</span>
                        <br/>
                        序号
                    </div>
                    <div class="vux-1px-r">
                        <span>{{item.score}}</span>
                        <br/>
                        金币佣金
                    </div>
                    <div class="vux-1px-r">
                        <span>{{item.gem}}</span>
                        <br/>
                        钻石佣金
                    </div>
                    <div class="vux-1px-r">
                        <span v-if="item.state == 0">操作中</span>
                        <span v-if="item.state == 1">完成</span>
                        <span v-if="item.state == 2">异常</span>
                        <br/>
                        提现状态
                    </div>
                </div>
                <!--<template v-if="item.state == 0">
                    <div class="footer" slot="footer">操作中</div>
                </template>
                <template v-else-if="item.state == 1">
                    <div class="footer" slot="footer">完成</div>
                </template>
                <template v-else-if="item.state == -1">
                    <div class="footer" slot="footer">异常</div>
                </template>-->
            </card>
        </template>
        <button class="dis-b loadMore" v-if="moreData" @click="loadMore">点击查看更多</button>
        <no-data v-if="noData"></no-data>
        <toast v-model="toast" type="text" :time="1000" is-show-mask :text="text" position="default"></toast>
    </div>
</template>

<script>
    import util from "../../fetch/util";

    export default {
        name: "scoreOut",
        data(){
            return {
                noData: false,
                myData: [],
                startTime: '',
                endTime: '',
                pageId: 0,
                last_page: 0,
                moreData: false,
                toast: false,
                text: '',
                totalMoney: 0,
            }
        },
        methods: {
            getData(pageId){
                let id = JSON.parse(localStorage.getItem('userInfo')).id;
                let params = {
                    id: id,
                    startDay: '1997-1-1',
                    endDay: '2999-1-1',
                    current_page: pageId
                };
                if(this.startTime){
                    params.startDay = this.startTime;
                }
                if(this.endTime){
                    params.endDay = this.endTime;
                }
                util.fetchGet(util.path.scoreOut, params).then((data)=>{
                    if(data.code === 0){
                        let thisData = data.data,
                            dataList = thisData.data;
                        if(thisData.total <= 0){
                            this.noData = true;
                            this.moreData = false;
                        }else{
                            this.noData = false;
                            this.moreData = true;
                            this.last_page = thisData.last_page;
                            if(thisData.total < 10 || dataList.length < 10){
                                this.moreData = false;
                            }
                            if(this.pageId < this.last_page){
                                for(let i = 0;i<dataList.length;i++){
                                    this.myData.push(dataList[i]);
                                }
                            }
                        }
                    }else{
                        console.log(data);
                    }
                });
            },
            getTotalMoney(){
                let id = JSON.parse(localStorage.getItem('userInfo')).id;
                let params = {
                    id: id
                };
                util.fetchGet(util.path.getTotalMoney, params).then((data)=>{
                    if(data.code === 0){
                        this.totalMoney = data.data + '元';

                    }else{
                        console.log(data);
                    }
                });
            },
            search(type){
                if(!type){
                    this.startTime = '';
                    this.endTime = '';
                }
                this.pageId = 0;
                this.myData = [];
                this.moreData = true;
                this.getData(this.pageId);
            },
            loadMore() {
                this.pageId++;
                this.getData(this.pageId);
            },
        },
        mounted(){
            this.getData(this.pageId);
            this.getTotalMoney();
        }
    }
</script>

<style scoped lang="less">
    @import '~vux/src/styles/1px.less';
    .card-demo-flex {
        display: flex;
    }
    .card-demo-content01 {
        padding: 10px 0;
    }
    .card-padding {
        padding: 10px;
    }
    .card-demo-flex > div {
        flex: 1;
        text-align: center;
        font-size: 12px;
    }
    .card-demo-flex span {
        color: #f74c31;
    }
    .footer{
        border-top: #e5e5e5 1px solid;
        color: #f74c31;
        margin-left: 15px;
        padding: 10px 0;
        font-size: 12px;
    }
    .btn{
        width: 50%;
        line-height: 40px;
        background: #00ADDE;
        color: #fff;
        font-size: 16px;
    }
</style>
